<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<title>个人信息页面</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="./css/layui/css/layui.css" media="all">
<link rel="stylesheet" href="./layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="./css/style.css" media="all">
</head>
<body onload="userinfo_page_load('');">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script>
		function userinfo_page_load(userid){
			$.ajax({
				url:"queryById",
				data:{
					"id":parent.id,
				},success:function(response){
					$("#userID").val(response.id);
					$("#userName").val(response.name);
					$("#userType").val(response.type);
					if(response.sex==="男"){
						$("#boy").attr('checked','checked');
					}else{
						$("#girl").attr('checked', 'checked');
					}
				},
			});
		};
		$(function () {
			$("#quit_login").click(function(){
				window.top.location.href="index.html";
			});
			$("#reset_btn").click(function(){
				userinfo_page_load(parent.id);
			});
			$("#change_userinfo_btn").click(function(){
				var usersex="";
				if($("#boy").is(":checked")){
					usersex="男";
				}else if($("#girl").is(":checked")){
					usersex="女";
				}
				$.ajax({
					url:"updateUserInfo",
					data:{
						"id":$("#userID").val(),
						"sex":usersex,
						"type":$("#userType").val(),
					},success:function(response){
						if(response==1){
							alert("更新成功,请重新登录");
							window.top.location.href ="index.html";
						}else{
							alert("更新失败");
						}
					},
				});
			});
		});
	</script>
	<div class="layui-fluid" id="component-tabs">
		<div class="layui-row">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
							<ul class="layui-tab-title">
								<li class="layui-this">基本信息</li>
								<li>修改密码</li>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item  layui-show">
									<div class="layui-fluid">
										<div class="layui-card">
											<div class="layui-card-body" style="padding: 15px;">
												<form class="layui-form" action="" lay-filter="component-form-group">
													<div class="layui-form-item">
														<label class="layui-form-label">ID:</label>
														<div class="layui-input-block">
															<input id="userID" disabled="disabled" style="cursor:no-drop;" type="text" name="title" lay-verify="title" autocomplete="off"  class="layui-input">
														</div>
													</div>

													<div class="layui-form-item">
														<div class="layui-inline">
															<label class="layui-form-label">用户名:</label>
															<div class="layui-input-inline">
																<input id="userName" type="text" name="url" lay-verify="url" autocomplete="off" class="layui-input">
															</div>
														</div>
													</div>

													<div class="layui-form-item">
														<label class="layui-form-label">身份:</label>
														<div class="layui-input-block">
															<input id="userType" disabled="disabled" style="cursor:no-drop;"  type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
														</div>
													</div>

													<div class="layui-form-item">
														<label class="layui-form-label">性别:</label>
														<div class="layui-input-block">
															<input id="boy" type="radio" name="sex" value="男" title="男" checked="">
															<input id="girl" type="radio" name="sex" value="女" title="女">
														</div>
													</div>
													<div class="layui-form-item layui-layout-admin">
														<div class="layui-input-block">
															<div class="layui-footer" style="left: 0;display: flex;flex-direction: row">
																<button id="change_userinfo_btn" class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
																<button id="reset_btn" class="layui-btn layui-btn-primary">重置</button>
															</div>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
								<div class="layui-tab-item">
									<form class="layui-form" action="" lay-filter="component-form-group">
										<div  style="width: 30%;">
											<div class="layui-card-body layui-row layui-col-space15">
												<div class="layui-col-md12">
													<input type="password" name="title" placeholder="修改密码" autocomplete="off" class="layui-input">
												</div>
												<div class="layui-col-md12">
													<input type="password" name="title" placeholder="确定密码" autocomplete="off" class="layui-input">
												</div>
												<div class="layui-form-item layui-layout-admin">
													<div class="layui-input-block">
														<div class="layui-footer" style="left: 0;">
															<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">确定修改</button>
															<button type="reset" class="layui-btn layui-btn-primary">重置</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="./css/layui/layui.js"></script>
	<script>
		layui.config({
			base: './css/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(['index'], function(){
			var $ = layui.$
					,admin = layui.admin
					,element = layui.element
					,router = layui.router();

			element.render();


			/* 触发事件 */
			var active = {
				tabAdd: function(){
					/* 新增一个Tab项 */
					element.tabAdd('demo', {
						title: '新选项'+ (Math.random()*1000|0) /* 用于演示 */
						,content: '内容'+ (Math.random()*1000|0)
						,id: new Date().getTime() /* 实际使用一般是规定好的id，这里以时间戳模拟下 */
					})
				}
				,tabDelete: function(othis){
					/* 删除指定Tab项 */
					element.tabDelete('demo', '22');
					othis.addClass('layui-btn-disabled');
				}
				,tabChange: function(){
					/* 切换到指定Tab项 */
					element.tabChange('demo', '33');
				}
			};

			$('#component-tabs .site-demo-active').on('click', function(){
				var othis = $(this), type = othis.data('type');
				active[type] ? active[type].call(this, othis) : '';
			});

			/* Hash地址的定位 */
			var layid = router.hash.replace(/^#layid=/, '');
			layid && element.tabChange('component-tabs-hash', layid);

			element.on('tab(component-tabs-hash)', function(elem){
				location.hash = '/'+ layui.router().path.join('/') + '#layid=' + $(this).attr('lay-id');
			});
		});
	</script>
	<script>
		layui.config({
			base: './css/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(['index', 'form', 'laydate'], function(){
			var $ = layui.$
					,admin = layui.admin
					,element = layui.element
					,layer = layui.layer
					,laydate = layui.laydate
					,form = layui.form;

			form.render(null, 'component-form-group');

			laydate.render({
				elem: '#LAY-component-form-group-date'
			});

			/* 自定义验证规则 */
			form.verify({
				title: function(value){
					if(value.length < 5){
						return '标题至少得5个字符啊';
					}
				}
				,pass: [/(.+){6,12}$/, '密码必须6到12位']
				,content: function(value){
					layedit.sync(editIndex);
				}
			});


			/* 监听提交 */
			form.on('submit(component-form-demo1)', function(data){
				parent.layer.alert(JSON.stringify(data.field), {
					title: '最终的提交信息'
				})
				return false;
			});
		});
	</script>
</body>
</html>
